<template>
  <div @click="login">
    <el-container>
      <el-header>
        <ShopcarHeader>
          <span slot="header">我的京东</span>
          <span @click="outLogin" slot="out">退出</span>
        </ShopcarHeader>
      </el-header>
      <el-main>
        <el-input placeholder="商品名称" v-model="title" clearable></el-input>
        <el-input placeholder="商品价格" v-model="price" clearable></el-input>
        <el-select v-model="classify" placeholder="商品分类">
          <el-option
            v-for="item in options"
            :key="item._id"
            :label="item.classify"
            :value="item.classify"
          ></el-option>
        </el-select>
        <el-input placeholder="商品图片" v-model="img" clearable></el-input>
        <el-button type="danger" round @click="submit">上传</el-button>
        <el-input placeholder="商品分类" v-model="classifyAdd" clearable></el-input>
        <el-input placeholder="分类图标" v-model="icon" clearable></el-input>
        <el-button type="danger" round @click="add">添加</el-button>
      </el-main>
      <el-footer>
        <MyFooter></MyFooter>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MyFooter from "../components/MyFooter";
import ShopcarHeader from "../components/ShopcarHeader";
import axios from "axios";
import { mapActions } from "vuex";
export default {
  name: "My",
  components: {
    MyFooter,
    ShopcarHeader
  },
  data() {
    return {
      title: "",
      price: "",
      classify: "",
      img: "",
      options: [],
      classifyAdd: "",
      icon: ""
    };
  },
  methods: {
    ...mapActions(['getShop']),
    outLogin() {
      var date = new Date();
      date.setTime(date.getTime() - 10000);
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
      if (keys) {
        for (var i = keys.length; i--; )
          document.cookie =
            keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
      }
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "已退出",
        center: true,
        showClose: true
      });
    },
    login() {
      if (document.cookie == "") {
        this.$router.push({
          path: "/login"
        });
        this.$message({
          message: "登录失效请重新登录",
          center: true,
          showClose: true,
          type: "warning"
        });
      }
    },
    submit() {
      if (
        this.title != "" &&
        this.price != "" &&
        this.classify != "" &&
        this.img != ""
      ) {
        axios
          .post("/login/submit", {
            title: this.title,
            price: this.price,
            classify: this.classify,
            img: this.img,
            count:1
          })
          .then(res => {});
        this.$message({
          message: "上传成功",
          center: true,
          showClose: true,
          type: "success"
        });
        this.title = "";
        this.price = "";
        this.classify = "";
        this.img = "";
      } else {
        this.$message({
          message: "上传失败",
          center: true,
          showClose: true,
          type: "error"
        });
      }
    },
    add() {
      if (this.classifyAdd != "" && this.icon != "") {
        axios
          .post("/classify", {
            classifyAdd: this.classifyAdd,
            icon: this.icon
          })
          .then(res => {});
        this.$message({
          message: "添加成功",
          center: true,
          showClose: true,
          type: "success"
        });
        this.classifyAdd = "";
        this.icon = "";
      } else {
        this.$message({
          message: "添加失败",
          center: true,
          showClose: true,
          type: "error"
        });
      }
    }
  },
  mounted() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
    axios.get("/getClassify").then(res => {
      this.options = res.data;
    });
  },
  updated() {
    this.getShop()
  },
  destroyed() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
a {
  color: black;
  text-decoration: none;
}
li {
  list-style: none;
}
.el-header {
  width: 100vw;
  height: 11.7333vw !important;
  background-color: #fff;
}
.el-footer {
  width: 100%;
  height: 13.3333vw !important;
}
span {
  font-size: 4.2666vw;
}
.el-container {
  display: flex;
  height: 177.867vw !important;
}
.el-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.el-input,
.el-select {
  width: 85%;
}

/deep/ .el-input__inner {
  margin-top: 5.3333vw;
  border-color: transparent;
  border-bottom: 1px solid #efefef;
  font-size: 4.2666vw;
}
.el-icon-s-custom {
  font-size: 26.6666vw;
}
.el-icon-s-custom::before {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120%;
  height: 120%;
  background-color: #efefef;
  border-radius: 50%;
}
.el-button {
  margin-top: 8vw;
  width: 85%;
  height: 13.3333vw;
  border-radius: 6.6666vw;
}
/deep/ .el-input__icon {
  position: absolute;
  top: 2.6666vw;
  left: -6.9333vw;
  font-size: 5.3333vw;
}
</style>